/*
    创建者：shuxiaokai
    创建时间：2021-09-15 2:48
    模块名称：联想参数
    备注：
*/
<template>
  <div class="s-mind-params">
    <!-- 搜索条件 -->
    <s-fieldset :title="$t('过滤条件')">
      <div class="d-flex">
        <div class="left">
          <div class="op-item">
            <div class="label">{{ $t("字段名") }}：</div>
            <el-input v-model="formInfo.key" :size="config.renderConfig.layout.size" :placeholder="$t('参数字段名称')" maxlength="100" class="w-65" clearable></el-input>
          </div>
          <div class="op-item">
            <div class="label">{{ $t("类型") }}：</div>
            <el-checkbox-group v-model="formInfo.type">
              <el-checkbox label="paths">{{ $t("Path参数") }}</el-checkbox>
              <el-checkbox label="queryParams">{{ $t("Query参数") }}</el-checkbox>
              <el-checkbox label="requestBody">{{ $t("Body参数") }}</el-checkbox>
              <el-checkbox label="responseParams">{{ $t("返回参数") }}</el-checkbox>
              <el-button link type="primary" text class="ml-5" @click="handleClearType">{{ $t("清空") }}</el-button>
            </el-checkbox-group>
          </div>
        </div>
        <div class="right">
          <el-descriptions :column="2" border>
            <el-descriptions-item>
              <template #label>
                <span>{{ $t("Path参数个数") }}</span>
              </template>
              <span>{{ tableInfo.filter(v => v.paramsPosition === 'paths').length }}</span>
              <span>&nbsp;个</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <span>{{ $t("Query参数个数") }}</span>
              </template>
              <span>{{ tableInfo.filter(v => v.paramsPosition === 'queryParams').length }}</span>
              <span>&nbsp;个</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <span>{{ $t("Body参数个数") }}</span>
              </template>
              <span>{{ tableInfo.filter(v => v.paramsPosition === 'requestBody').length }}</span>
              <span>&nbsp;个</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <span>{{ $t("Response参数个数") }}</span>
              </template>
              <span>{{ tableInfo.filter(v => v.paramsPosition === 'responseParams').length }}</span>
              <span>&nbsp;个</span>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </s-fieldset>
    <s-fieldset :title="`${$t('联想参数')}(${tableInfo.length})`" class="mt-3">
      <el-button type="danger" class="mb-1" :disabled="selectData.length === 0" @click="handleDeleteManyParams">{{ $t("批量删除") }}</el-button>
      <el-table :data="tableInfo" stripe border height="calc(100vh - 350px)" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="key" :label="$t('参数名称')" align="center">
          <template #default="scope">
            <s-emphasize :value="scope.row.key" :keyword="formInfo.key"></s-emphasize>
          </template>
        </el-table-column>
        <el-table-column prop="type" :label="$t('参数类型')" align="center"></el-table-column>
        <el-table-column prop="value" :label="$t('参数值')" align="center">
          <template #default="scope">
            <div class="value-wrap">{{ scope.row.value }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="description" :label="$t('备注')" align="center"></el-table-column>
        <el-table-column prop="paramsPosition" :label="$t('参数位置')" align="center"></el-table-column>
        <el-table-column :label="$t('操作')" align="center">
          <template #default="scope">
            <!-- <el-button link type="primary" text @click="handleEditParams(scope.row)">修改</el-button> -->
            <el-button link type="primary" text @click="handleDeleteParams(scope.row)">{{ $t("删除") }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </s-fieldset>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, Ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import type { ApidocMindParam } from '@@/global'
import { store } from '@/store/index'
import { router } from '@/router/index'
import { axios } from '@/api/api'
import { $t } from '@/i18n/i18n'

//搜索条件
const formInfo: Ref<{ key: string, type: ApidocMindParam['paramsPosition'][] }> = ref({
  key: '',
  type: [],
})
//表格参数
const tableInfo = computed(() => {
  const allParams: ApidocMindParam[] = [];
  store.state['apidoc/baseInfo'].mindParams.forEach(v => {
    allParams.push(v);
  })
  allParams.sort((a, b) => {
    if (a.key.toLowerCase() > b.key.toLowerCase()) {
      return 1;
    }
    return -1;
  });
  return allParams.filter(v => {
    const matchedKey = !formInfo.value.key || v.key.includes(formInfo.value.key);
    return matchedKey;
  }).filter(v => {
    if (formInfo.value.type.length === 0) {
      return true;
    }
    return formInfo.value.type.includes(v.paramsPosition)
  })
});
//清空checkbox
const handleClearType = () => {
  formInfo.value.type = [];
}
//=====================================操作====================================//
//批量选择
const selectData: Ref<ApidocMindParam[]> = ref([]);
const handleSelectionChange = (data: ApidocMindParam[]) => {
  selectData.value = data;
}
//修改参数
// const handleEditParams = (row: ApidocMindParam) => {
//     console.log(row)
// }
//删除某个参数
const handleDeleteParams = (row: ApidocMindParam) => {
  ElMessageBox.confirm($t('是否删除当前参数'), $t('提示'), {
    confirmButtonText: $t('确定'),
    cancelButtonText: $t('取消'),
    type: 'warning',
  }).then(() => {
    const projectId = router.currentRoute.value.query.id as string;
    const params = {
      projectId,
      ids: [row._id],
    };
    axios.delete('/api/project/doc_params_mind', { data: params }).then(() => {
      store.commit('apidoc/baseInfo/deleteMindParamsById', row._id)
    }).catch((err) => {
      console.error(err);
    });
  }).catch((err) => {
    if (err === 'cancel' || err === 'close') {
      return;
    }
    console.error(err);
  });
}
//批量删除
const handleDeleteManyParams = () => {
  ElMessageBox.confirm($t('确定批量删除当前选中节点'), $t('提示'), {
    confirmButtonText: $t('确定'),
    cancelButtonText: $t('取消'),
    type: 'warning',
  }).then(() => {
    const projectId = router.currentRoute.value.query.id as string;
    const params = {
      projectId,
      ids: selectData.value.map(v => v._id),
    };
    axios.delete('/api/project/doc_params_mind', { data: params }).then(() => {
      selectData.value.forEach(v => {
        store.commit('apidoc/baseInfo/deleteMindParamsById', v._id)
      })
    }).catch((err) => {
      console.error(err);
    });
  }).catch((err) => {
    if (err === 'cancel' || err === 'close') {
      return;
    }
    console.error(err);
  });
}
</script>

<style lang="scss">
.s-mind-params {
    padding: size(20);
    .value-wrap {
        max-height: size(140);
        overflow-y: auto;
    }
    .left {
        padding-left: size(20);
        flex: 0 0 40%;
        border-right: 1px solid $gray-600;
    }
    .right {
        flex: 0 0 50%;
        padding-left: size(30);
    }
    .op-item {
        display: flex;
        align-items: center;
        .label {
            flex: 0 0 size(80);
        }
    }
}
</style>
